<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台管理-登录</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/lib/captcha/css/verify.css}" media="all">

    <style>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #1E9FFF;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
        .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
        .login-form .layui-form-item {position:relative;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
    </style>
</head>
<body>
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="" lay-filter="form-val">
                <div class="layui-form-item logo-title">
                    <h1>火烧寮酒店管理系统后台01</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="email"></label>
                    <input type="email" id="email" name="email" lay-verify="required|account" placeholder="请输入邮箱" autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="code"></label>
                    <input type="text" id="code" name="code" lay-verify="required|code" placeholder="验证码" autocomplete="off" class="layui-input verification captcha" value="">
                    <div class="captcha-img">
                        <button id="sendEmail" type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-fluid" lay-filter="send">发送验证码</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div id="content"></div>
                    <!-- 滑块验证 -->
                    <button id="btn" type="button" class="layui-btn layui-btn layui-btn-normal layui-btn-fluid layui-hide" >登 入</button>
                    <!-- layui 表单提交 -->
                    <button id="btn1" class="layui-btn layui-btn layui-btn-normal layui-btn-fluid " lay-submit="" lay-filter="login">登 入</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    let ctx = '[[${#request.contextPath}]]';
</script>
<script th:src="@{/static/lib/captcha/index/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/crypto-js.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/ase.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/js/verify.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/captcha/index/lib/jq-module/jquery.particleground.min.js}" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // // 粒子线条背景
        // $(document).ready(function(){
        //     $('.layui-container').particleground({
        //         dotColor:'#7ec7fd',
        //         lineColor:'#7ec7fd'
        //     });
        // });

        $('#content').slideVerify({
            baseUrl:'',  //服务器请求地址, 默认地址为安吉服务器;
            containerId:'btn',//pop模式 必填 被点击之后出现行为验证码的元素id
            mode:'pop',     //展示模式
            imgSize : {       //图片的大小对象,有默认值{ width: '310px',height: '155px'},可省略
                width: '400px',
                height: '200px',
            },
            barSize:{          //下方滑块的大小对象,有默认值{ width: '310px',height: '50px'},可省略
                width: '400px',
                height: '40px',
            },
            beforeCheck:function(){  //检验参数合法性的函数  mode ="pop"有效
                let flag = true;
                //实现: 参数合法性的判断逻辑, 返回一个boolean值
                return flag
            },
            ready : function() {},  //加载完毕的回调
            success : function(params) { //成功的回调
                // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
                console.log("验证成功", params)
                setTimeout(function () {
                    send();
                }, 1000);
            },
            error : function() {}        //失败的回调
        });


        // jquery 注册点击事件
        $("#sendEmail").click(function (){
            // 取消注册点击事件
            $("#sendEmail").unbind("click");
            $("#sendEmail").attr("disabled", true); // 按钮不能点击
            let data = form.val('form-val');
            if (data.email){
                // TODO 正则校验
                $.ajax({
                    url: ctx + '/email',
                    type: 'POST',
                    data: {
                        email: data.email
                    },
                    success: function (result) {
                        if (result.code === 200) {
                            layer.msg("发送成功", {icon: 1, time: 1000});
                        } else {
                            layer.msg(result.msg, {icon: 2, time: 1000});
                        }
                    }
                });
            } else{
                layer.msg("请输入邮箱", {icon: 2, time: 1000});
            }
        });

        // 进行登录操作
        form.on('submit(login)', function (data) {
            // jquery 触发点击事件
            $("#btn").click();
            return false;
        });

        function send(data){
             data = form.val('form-val');
            // 密码加密
            let key = CryptoJS.lib.WordArray.random(16).toString();
            data.key = key;
            data.password = aesEncrypt(data.password, key);
            fetch(ctx + '/email/login', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data),
            }).then(function (response) {
                return response.json();
            }).then(function (result) {
                if (result.code === 200) {
                    layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                        location.href = result.data;
                    });
                } else {
                    layer.msg(result.msg, {icon: 2, time: 1000});
                }
            }).catch(function (error) {
                layer.msg(error, {icon: 2, time: 1000});
            })
        }
    });
</script>
</body>
</html>